<template>
	<view class="notice-list">
		<u-tabs :scrollable='true' :list="classes" :current='current' @click="changeClass" lineHeight='0'
			:inactiveStyle='inactiveStyle' :activeStyle='activeStyle' lineColor='transparent'>
		</u-tabs>
		<u-line></u-line>
		<view v-for='item in list' :key='item.id' class="bg-color-item flex flex-ai-center pa-12 flex-js-sb"  @click="$u.route('/pages/notice/newsDetails',{id:item.id})">
			<!-- <w-image width="327" height="92" :src="item.image" radius="12"></w-image> -->
			<view class="flex flex-dir-col flex-js-sa" style="height: 138rpx;">
				<view class="font-color-textPrimary font-size-14 text-overflow pb-12" style="width: 100%;">
					{{item.title}}
				</view>
				<view class="flex flex-js-sb flex-ai-center font-size-10">
					<text class="font-color-666">{{item.create_time}}</text>
					<!-- <view class="bg-color-describe3 font-color-convention ptb-3 plr-6 br-4 text-overflow" style="max-width: 120rpx;">
						{{item.category}}
					</view> -->
				</view>
			</view>
			<image class="br-12" :src="$ossUrl + item.image" style="width: 216rpx;height: 138rpx;border-radius: 8rpx;margin-left: 76rpx;"></image>
		</view>
	<!-- 	<view v-for='item in list' :key='item.id' class="bg-color-white br-12 pa-12 mb-12 flex"
			@click="$u.route('/pages/notice/newsDetails',{id:item.id})">
			<view class="flex-1 pr-12 flex flex-dir-col flex-js-sb">
				<text class="font-size-14 font-color-black text-overflow-2" style="width: 100%;">{{item.title}}</text>
				<view class="font-size-10 flex flex-js-sb flex-ai-center">
					<text class="font-color-minor">{{item.createtime|formatDate}}</text>
					<view class="tag ptb-3 plr-6 br-4 text-overflow" style="max-width: 150rpx;">
						{{item.category}}  
					</view>
				</view>
			</view>
			<w-image radius="12" :lazy-load="false" v-if="item.image" :src="item.image" width="123" height="80"></w-image>
			<view class="" style="width: 246rpx;height: 160rpx;" v-if="item.image">
				<image lazy-load class="br-12" :src="$ossUrl+item.image" mode="" style="width: 246rpx;height: 160rpx;">
				</image>
			</view>
		</view> -->
		<w-loading emptyTop="150" :type="loading" emptyType="search"></w-loading>
	</view>
</template>

<script>
	import {
		getNewsClasses,
		getNewsList
	} from "@/api/notice/index.js"
	export default {
		data() {
			return {
				loading: 'none',
				activeStyle: {
					color: '#1F52F8',
					fontSize: '28rpx'
				},
				inactiveStyle: {
					color: '#333333',
					fontSize: '28rpx'
				},
				listData: {},
				classes: [{
					name: "全部",
					id: 0
				}],
				category: 0,
			}
		},
		computed: {
			current() {
				return this.classes.findIndex(v => v.id == this.category)
			},
			search() {
				return this.listData[this.category] ? this.listData[this.category].pager : {}
			},
			list(){
				return this.listData[this.category] ? this.listData[this.category].list : []
			}
		},
		methods: {
			init() {
				if (this.classes.length == 1) {
					this.getClasses();
				}
				this.changeClass({
					index: 0
				})
			},
			//刷新
			refresh(){
				let search=JSON.parse(JSON.stringify(this.search))
				search.page=1
				this.getList(search);
			},
			//加载更多
			loadMore(){
				let search=JSON.parse(JSON.stringify(this.search))
				search.page++
				this.getList(search);
			},
			//获取分类
			getClasses() {
				getNewsClasses().then(res => {
					this.classes = this.classes.concat(res.data)
				})
			},
			//切换分类
			changeClass({
				index,
				refresh=false
			}) {
				let {
					id
				} = this.classes[index]
				this.category = id;
				if (!this.listData[id]||refresh) {
					let pager = {
						page: 1,
						category: id,
						list_rows: 25
					}
					let list = []
					this.$set(this.listData, id, {
						pager,
						list
					})
					this.getList(pager)
				} else {
					let {
						pager,
						list
					} = this.listData[id]
					if (!list.length) {
						this.getList(pager)
					}else{
						this.loading='none'
					}

				}


			},
			//获取列表
			getList(search) {
				if(this.loading=='loading') return;
				this.loading = 'loading'
				getNewsList(search).then(res => {
					this.loading = 'none'
					if(search.page==1){
						this.$set(this.listData[search.category], "list",[])
					}
					uni.stopPullDownRefresh()
					if (res.data.data.length) {
						this.$set(this.listData[search.category], 'pager', search);
						this.$set(this.listData[search.category], "list", this.listData[search.category].list
							.concat(res.data.data))
					} else {
						if (search.page == 1) {
							this.loading = 'empty'
						}
					}
				})
			}
		}
	}
</script>

<style>
		.tag {
			background: #BABABA;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-size: 24rpx;
			color: #666666;
		}
</style>
